<%--
  Created by IntelliJ IDEA.
  User: LiuTong
  Date: 2017/11/21
  Time: 14:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.salesmanager.core.constants.Constants" %>
<%@ page import="com.salesmanager.core.business.content.model.FileContentType" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="sm" uri="/shopizer-tags" %>
<%@ taglib prefix="input" uri="http://www.springframework.org/tags/form" %>
<div class="container-breadcrumb">
    <div class="row ">
        <div class="col-sm-12">
            <ol class="breadcrumb">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                <li>图书管理</li>
                <li class="active">
                    <c:if test="${bookId==null}"><s:message text="新建图书"/></c:if>
                    <c:if test="${bookId!=null}"><s:message text="编辑图书"/></c:if>
                </li>
            </ol>
        </div>
    </div>
    <!--/.row-->
</div>
<div id="container-content" class="container-content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <c:choose>
                <c:when test="${bookId!=null}">
                    编辑图书
                </c:when>
                <c:otherwise>
                    新建图书
                </c:otherwise>
            </c:choose>
        </div>

        <form:form id="myForm" method="POST" cssClass="form-horizontal" commandName="configuration"
                   enctype="multipart/form-data"
                   action="${pageContext.request.contextPath}/book/saveBook">
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">图书编码 ：</label>

                    <div class="col-sm-6">
                        <c:if test="${bookId==null}"><form:input cssClass="form-control" id="channelCode"
                                                                    path="book.bookCode"/></c:if>
                        <c:if test="${bookId!=null}">
                            <p class="form-control-static">${configuration.book.bookCode}</p>
                            <form:hidden path="book.bookCode"/>
                        </c:if>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">图书名称 ：</label>

                    <div class="col-sm-6">
                        <form:input cssClass="form-control" id="bookName" path="book.bookName"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">图书作者 ：</label>

                    <div class="col-sm-6">
                        <form:input cssClass="form-control" id="bookName" path="book.author"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">开始时间 ：</label>

                    <div class="col-sm-6">
                        <div id="datetimepicker_start" class="input-group date">
                            <form:input id="startTimeDate" cssClass="form-control" path="book.startTime"
                                        data-date-format="YYYY-MM-DD HH:mm:ss"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">结束时间 ：</label>

                    <div class="col-sm-6">
                        <div id="datetimepicker_end" class="input-group date">
                            <form:input id="startTimeDate" cssClass="form-control" path="book.endTime"
                                        data-date-format="YYYY-MM-DD HH:mm:ss"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-2 control-label">图书描述 ：</label>

                    <div class="col-sm-6">
                        <form:textarea cssClass="form-control" id="versionDesc" path="book.bookDesc"/>
                    </div>
                </div>

                <div class="form-group" id="firstImageID">
                    <label class="col-sm-2 control-label">上传图片 ：</label>

                    <div class="col-sm-6">
                        <input class="input-file" id="firstImage" name="firstImage" type="file" style="display: none">
                        <button type="button" data-upload="firstImage"
                                class="btn btn-success btn-sm btn-upload pull-right">上传图片
                        </button>
                        <div class="img-wrap ad-image">
                            <img id="img_firstImage" class="img-thumbnail" src="<c:if test="${configuration.book.imagName != null}"><sm:contentImage imageName="${configuration.book.imagName}"
                 code="${configuration.book.bookCode}"
                 fileContentType="<%=FileContentType.APP.name()%>"/></c:if>">
                        </div>
                    </div>
                </div>


                <form:hidden path="book.id"/>
            </div>
            <div class="panel-footer">
                <button id="channelSubmit" type="submit" class="btn btn-success"><s:message code="button.label.submit2"
                                                                                            text="Submit"/></button>
            </div>
        </form:form>

    </div>
</div>


<script src="${pageContext.request.contextPath}/resources/common/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/common/paginator.js"></script>
<script>
    $(document).ready(function () {
        $('#datetimepicker_start').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh', //汉化
            pickTime: false,
            autoclose: true
        });
        $('#datetimepicker_end').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh', //汉化
            pickTime: false,
            autoclose: true
        });

        $(".btn-upload").click(function () {
            var id = $(this).data("upload");
            $("#" + id).click();
        });

        //上传图片
        $(".input-file").change(function (evt) {
            var files = evt.target.files;
            var $uploadTarget = $("#img_" + $(this).attr("name"));
            for (var i = 0; i < files.length; i++) {
                var f = files[i];

                if (!(f.type.indexOf("image") == 0)) {
                    alert(f.name + "不是图片类型!");
                    continue;
                }

                var reader = new FileReader();
                reader.onload = (function (filetemp) {
                    return function (e) {
                        $uploadTarget.attr("src", e.target.result);

                    }
                })(f);
                reader.readAsDataURL(f);
            }
        });
    })
</script>